<template>
  <div class="parent">
    <div class="header">{{ $t('system.versionInfo') }}</div>
    <div class="version-wrapper content">
      <div class="line">
        <div class="title">{{ $t('system.serial_id') }}:</div>
        <div class="value">{{ versionInfo.serial_id }}</div>
      </div>
      <div class="line">
        <div class="title">{{ $t('system.serial_mod') }}:</div>
        <div class="value">{{ versionInfo.serial_mod }}</div>
      </div>
      <div class="line">
        <div class="title">{{ $t('system.display_version') }}:</div>
        <div class="value">{{ versionInfo.display_version }}</div>
      </div>
      <div class="line">
        <div class="title">{{ $t('system.display_web_version') }}:</div>
        <div class="value">{{ versionInfo.display_web_version }}</div>
      </div>
      <div class="line">
        <div class="title">{{ $t('system.versionDetection') }}:</div>
        <div class="value">{{ $t('system.unknown') }}</div>
      </div>
    </div>
    <div class="header">{{ $t('system.sys_resource') }}</div>
    <div class="version-wrapper content">
      <div class="line">
        <div class="title">{{ $t('system.cpu_usage') }}:</div>
        <div class="value">{{ cpuInfo.cpu_usage }}</div>
      </div>
      <div class="line">
        <div class="title">{{ $t('system.memory_usage') }}:</div>
        <div class="value">{{ memoryInfo.memory_usage }}</div>
      </div>
    </div>
    <div class="header">{{ $t('system.software_upgrade') }}</div>
    <div class="version-wrapper content">
      <div class="line">
        <div class="title">{{ $t('system.import_upgrade_file') }}:</div>
        <el-upload
          class="uploader"
          :action="''"
          :show-file-list="false"
          :limint="1"
          :http-request="handleUpload"
        >
          <el-input :placeholder="$t('system.select_upgrade_file')" />
        </el-upload>
        <MyButton class="confirm ml-20" @click="handleUpdateSoftware">{{ $t('system.upgrade') }}</MyButton>
      </div>
    </div>
    <div class="header">{{ $t('system.other') }}</div>
    <div class="version-wrapper content">
      <div class="line">
        <MyButton class="confirm" @click="restart">{{ $t('system.sys_start') }}</MyButton>
        <MyButton style="width:135px;" class="confirm" icon="el-icon-refresh" @click="handeRestore"
          >{{ $t('system.restore_default_config') }}</MyButton
        >
        <MyButton class="confirm" @click="handleClose">{{ $t('system.close_service') }}</MyButton>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getVersion,
  closeSystem,
  getMemory,
  getCpu,
  updateSoftware,
  restart,
  restore,
} from "./service";
import util from "@/utils";
export default {
  mounted() {
    this.getData();
    this.timer = setInterval(() => {
      this.getData();
    }, 60 * 1000);
  },
  data() {
    return {
      versionInfo: {},
      memoryInfo: {},
      cpuInfo: {},
    };
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    handleClose() {
      util.confirm(
        this.$t('common.promit'),
        this.$t('system.close_promit'),
        null,
        null,
        () => {
          closeSystem().then((res) => {
            if (res.code != 0) return;
            util.msg.success("close_success");
          });
        }
      );
    },
    handeRestore() {
      util.confirm(
        this.$t('common.promit'),
        this.$t('system.restore_promit'),
        null,
        null,
        () => {
          restore().then((res) => {
            if (res.code != 0) return;
            util.msg.success("restore_success");
          });
        }
      );
    },
    restart() {
      this.$message( this.$t('system.restart_promit'));
      restart().then((res) => {
        if (res.code != 0) return;
        this.$message.success(this.$t('system.restart_success'));
      });
    },
    handleUpdateSoftware() {
      const params = {
        file: this.softFile,
      };
      updateSoftware(params).then((res) => {
        if (res.code != 0) return;
        this.$message.success(this.$t('system.upgrade_success'));
      });
    },
    handleUpload(file) {
      this.softFile = file;
    },
    getData() {
      this.getVersion();
      this.getMemory();
      this.getCpu();
    },
    async getVersion() {
      const res = await getVersion();
      if (res.code != 0) return;
      this.versionInfo = res.data;
    },
    async getMemory() {
      const res = await getMemory();
      if (res.code != 0) return;
      this.memoryInfo = res.data;
    },
    async getCpu() {
      const res = await getCpu();
      if (res.code != 0) return;
      this.cpuInfo = res.data;
      this.cpuInfo.cpu_usage = this.cpuInfo.cpu_usage.toFixed(2) + "%";
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  font-size: 14px;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  .header {
    background: #fafafc;
    width: 100%;
    height: 70px;
    line-height: 50px;
    font-weight: bold;
    position: relative;
    &:after {
      content: "";
      width: 100%;
      position: absolute;
      height: 1px;
      left: 0;
      bottom: 20px;
      background: #c6c6c6;
    }
  }
  .content {
    .line {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-start;
      align-items: center;
    }
    .title {
      width: 120px;
      text-align: right;
      margin-right: 20px;
    }
    .value {
    }
  }
}
</style>
